import { Button } from 'antd';
import React from 'react';

import MyModal from '@/components/MyModal';
import { t } from '@/locales/i18n';

import MyEditor, { type Props as EditorProps } from './Editor';

type Props = Omit<EditorProps, 'resize'> & {
  className?: string;
  language?: string;
};

function getLanguage(language: string | undefined): string {
  let fullName: string;
  switch (language) {
    case 'py':
      fullName = 'python';
      break;
    case 'js':
      fullName = 'typescript';
      break;
    default:
      fullName = `typescript`;
      break;
  }
  return fullName;
}

const CodeEditor = ({ className, ...props }: Props) => {
  const [isOpen, setIsOpen] = React.useState(false);
  const { language, ...otherProps } = props;
  const fullName = getLanguage(language);
  const onClose = () => {
    setIsOpen(false);
  };

  const onOpenModal = () => {
    setIsOpen(true);
  };

  return (
    <>
      <MyEditor
        className={className}
        {...props}
        resize
        onOpenModal={onOpenModal}
        language={fullName}
      />
      {/* TODO */}
      <MyModal
        isOpen={isOpen}
        onClose={onClose}
        iconSrc="edit"
        title={t('code_editor')}
        minW="50vw"
      >
        <MyEditor {...props} className="bg-gray-500" defaultHeight={600} language={fullName} />
        <Button className="ml-auto mr-6 mt-2 px-6" onClick={onClose}>
          {t('common.Confirm')}
        </Button>
      </MyModal>
    </>
  );
};

export default React.memo(CodeEditor);
